<script setup>
import { ref, onMounted } from "vue";
import { UserInfoApi } from "@/apis/user";
import { Message } from "tdesign-mobile-vue";
import { useRouter, useRoute } from "vue-router";

const formData = ref({
  id: "",
  card: "",
  phone: "",
  profile: {
    name: "",
    grade: "",
    class: "",
    gender: 1,
    qq_account: "",
    cnc_experience: "0"
  }
});
const loading = ref(false);
const route = useRoute();
const router = useRouter();
onMounted(() => {
  UserInfoApi(route.params.id)
    .then(res => {
      const { code, data } = res.data;
      if (code === 1) {
        if (data.status === 1) {
          Message.warning({
            content: "用户状态无需审批",
            context: document.querySelector('main'),
            offset: [8, 8]
          })
          setTimeout(() => {
            router.back()
          }, 2000);
          return;
        }
        formData.value = data;
      }
    })
})

function confirm(t) {
  UserInfoApi(formData.value.id, t)
    .then(res => {
      const { code, msg } = res.data;
      if (code === 1) {
        Message.success({
          content: "审批通过",
          context: document.querySelector('main'),
          offset: [8, 8]
        })
        setTimeout(() => {
          router.back()
        }, 2000);
      } else {
        Message.error({
          content: msg,
          context: document.querySelector('main'),
          offset: [8, 8]
        })
      }
    })
}
</script>
<template>
  <main id="container">
    <t-cell-group title="基本信息">
      <t-cell>
        <t-input v-model="formData.profile.name" borderless label="姓名" placeholder="请填写真实姓名"></t-input>
      </t-cell>
      <t-cell title="性别" style="padding: 16px;">
        <t-radio-group class="box" :default-value="expValue" v-model="formData.profile.gender" borderless>
          <t-radio :block="false" name="radio" :value="0" label="男" />
          <t-radio :block="false" name="radio" :value="1" label="女" />
        </t-radio-group>
      </t-cell>
      <t-cell>
        <t-input v-model="formData.profile.grade" borderless label="年级" placeholder="例：2023级"></t-input>
      </t-cell>
      <t-cell>
        <t-input v-model="formData.profile.class" borderless label="专业班级" placeholder="例：数控技术1班"></t-input>
      </t-cell>
      <t-cell>
        <t-input v-model="formData.phone" borderless label="手机号" placeholder="请填写正确的手机号"></t-input>
      </t-cell>
      <t-cell>
        <t-input v-model="formData.profile.qq_account" borderless label="QQ/微信" placeholder="请填写QQ/微信"></t-input>
      </t-cell>
      <t-cell>
        <t-input v-model="formData.card" borderless label="身份证号" placeholder="请填写正确的身份证号"></t-input>
      </t-cell>
    </t-cell-group>
    <t-cell-group title="拓展信息">
      <t-cell style="padding: 16px;" title="是否相关基础">
        <t-radio-group class="box" :default-value="formData.profile.cnc_experience"
          v-model="formData.profile.cnc_experience" borderless>
          <t-radio :block="false" name="radio" :value="1" label="是" />
          <t-radio :block="false" name="radio" :value="2" label="否" />
        </t-radio-group>
      </t-cell>
      <t-cell borderless>
        <t-input v-model="formData.profile.demand" label="需求目标" placeholder="加工工艺、非标定制、大赛经验"></t-input>
      </t-cell>
    </t-cell-group>
    <div style="padding: 8px;">
      <t-button :loading="loading" :dislabled="loading" block theme="primary" @click="confirm(true)"
        style="margin-bottom: 8px;">同意
      </t-button>
      <t-button :loading="loading" :dislabled="loading" block theme="danger" @click="confirm(false)">拒绝</t-button>
    </div>
  </main>
</template>

<style scoped lang="less">
.t-cell {
  padding: 0;
}
</style>